<template>
  <div class="mapCont">
    <el-input
      placeholder="请选择所属城市"
      id="serchid"
      v-model="serchAddress"
    />
    <div class="serchList">
      <div class="serchListCont">
        <div
          @click="serchClickFn(item)"
          :class="
            index == serchList.length - 1
              ? 'noBorder serchListItem'
              : 'serchListItem'
          "
          :key="index"
          v-for="(item, index) in serchList"
        >
          <span>{{ item.business }}</span>
          <span class="serchListCity"
            >{{ item.province }}{{ item.city }}{{ item.district }}</span
          >
        </div>
      </div>
    </div>
    <div class="mapBox" id="map"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      longitude: "",
      latitude: "",
      serchList: [],
      serchAddress: this.propVal,
    };
  },
  props: {
    propVal: String,
  },
  methods: {
    initMap() {
      let _this = this;
      console.log(111);
      var map = new BMap.Map("map");
      console.log(222);
      map.centerAndZoom(new BMap.Point(118.803129, 32.065761), 15);
      console.log(333);
      map.setCurrentCity("南京市");
      console.log(444);
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      if (this.serchAddress) {
        setPlace();
      }
      console.log(555);
      let ac = new BMap.Autocomplete({
        //建立一个自动完成的对象
        input: "serchid",
        location: map,
      });
      console.log(666);
      ac.addEventListener("onconfirm", function (e) {
        //鼠标点击下拉列表后的事件
        let _value = e.item.value;
        _this.serchAddress =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        setPlace();
      });
      console.log(777);
      let geoc = new BMap.Geocoder();
      map.addEventListener("click", function (e) {
        map.centerAndZoom(new BMap.Point(e.point.lng, e.point.lat), 18);
        geoc.getLocation(e.point, function (rs) {
          _this.longitude = rs.point.lng;
          _this.latitude = rs.point.lat;
          let addComp = rs.addressComponents;
          _this.serchAddress = rs.address;
          if (rs.surroundingPois.length > 0) {
            _this.serchAddress = rs.surroundingPois[0].address;
          }
          let obj = {
            address: _this.serchAddress,
            latitude: _this.latitude,
            longitude: _this.longitude,
          };
          _this.$emit("getMapInfo", obj);
        });
      }); //点击地图获取地址

      function setPlace() {
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          let pt = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          _this.longitude = pt.lng;
          _this.latitude = pt.lat;
          map.centerAndZoom(pt, 20);
          let obj = {
            address: _this.serchAddress,
            latitude: _this.latitude,
            longitude: _this.longitude,
          };
          _this.$emit("getMapInfo", obj);
        }
        let local = new BMap.LocalSearch(map, {
          //智能搜索
          onSearchComplete: myFun,
        });
        local.search(_this.serchAddress);
      } //地图搜索
    },
  },
  mounted() {
    this.initMap();
  },
  created() {},
};
</script>

<style scoped lang="less">
.mapCont {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  .serchList {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 0 0.8rem;
    box-sizing: border-box;
    .serchListCont {
      width: 100%;
      max-height: 10rem;
      background-color: #fff;
      padding: 0 0.75rem;
      box-sizing: border-box;
      border-top: 1px solid #ebebeb;
      overflow-y: scroll;
      .serchListItem {
        border-bottom: 1px solid #ebebeb;
        line-height: 1.75rem;
        display: flex;
        color: #666;
        justify-content: space-between;
        .serchListCity {
          color: #999;
        }
      }
      .noBorder {
        border-bottom: none;
      }
    }
  }
  #map {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    height: 400px;
  }
}
</style>
<style>
.van-cell::after {
  border-bottom: none;
}
.tangram-suggestion-main {
  /* top: 25rem !important;
    left: 7rem !important; */
}
</style>
